<template>
<!--banner轮播-->
        <div class="swiper-container" :ref="refName">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(bannerSwiper, index) in bannerList"
              :key="bannerSwiper.id"
            >
              <img :src="bannerSwiper.imgUrl" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
</template>
<script>
import Swiper from "swiper";
export default {
name: 'Swiper',
props:['bannerList','refName'],
watch: {
    bannerList: {
      //监视变化，此时一定有数据了
      handler() {
        this.$nextTick(function () {
          // DOM 现在更新了
          // `this` 绑定到当前实例
          new Swiper("this.$refs.refName", {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },

            // 如果需要滚动条
            /* scrollbar: {
                el: '.swiper-scrollbar',
                }, */
          });
        });
      },
    },
  },
}
</script>
<style lang = 'less' scoped>
</style>
